<template>
	<base-breadcrumb>
		<a-card>
			<div class="table-operator">
				<!-- <titleName title="双优化分类管理"></titleName> -->
				<div><a-button type="primary" @click="showModal(true)" v-btnPermission="'tm_003_add_05'">添加行</a-button></div>
			</div>
			<!-- 一级表格 -->
			<list-table
			row-key="id"
		    :request="loadData"
			:columns="columns"
		    ref="table"
			:pagination="false"
			:show-page="false"
			>
				<span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
				<span slot="state" slot-scope="text, record">{{ record.state || record.status ? '可用' : '不可用'}}</span>
				<!-- 操作 -->
				<span slot="operation" slot-scope="text, record">
					<template>
						<a v-if="record.edit == 1" @click="addEdit(record,false)" v-btnPermission="'tm_003_edi_06'">编辑</a>
					</template>
				</span>
			</list-table>
			<!-- 弹窗 -->
		</a-card>
		<a-modal title="双优化分类管理"
		:visible="visible"
		@ok="handleOk(state)"
		@cancel="handleCancel"
		:width="1010"
		>
			<a-form-model ref="ruleForm" :model="objFrom" :rules="rules" hideRequiredMark>
				<a-row :gutter="24">
					<a-col :md="12" :sm="12">
						<a-form-model-item label="分类名称"
						prop="name"
						:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
						:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
							<BaseInput v-model.trim="objFrom.name" />
					</a-form-model-item>
					</a-col>
					<a-col :md="12" :sm="12">
						<a-form-model-item label="状态"
						prop="status"
						:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
						:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
							<a-select  placeholder="请选择"  @select="handleChange" v-model="objFrom.status">
								<a-select-option value="1">可用</a-select-option>
								<a-select-option value="0">不可用</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :md="12" :sm="12">
						<a-form-model-item label="分类"
						prop="category"
						:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
						:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
							<a-select  placeholder="请选择"  @select="handleChange1" v-model="objFrom.category">
								<a-select-option :value="111">设计优化</a-select-option>
								<a-select-option :value="222">施工组织设计（方案）优化</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
			</a-form-model>
		</a-modal>
	</base-breadcrumb>
</template>

<script>
import { categoryList , addCategory , modifyCategory} from '@/api/technical/optimizationPlan'
const columns = [
	{
		title: '序号',
		width: '90px',
		scopedSlots: { customRender: 'serial' }
	},
	{
		title: '名称',
		dataIndex: 'name'
	},
	{
		title: '状态',
		dataIndex: 'state',
		scopedSlots: { customRender: 'state' }
	},
	{
		title: '操作',
		dataIndex: 'operation',
		width: '120px',
		scopedSlots: { customRender: 'operation' }
	}
]
export default {
    name:'a'+Date.now(),	mounted() {
	},
	data() {
		this.columns = columns;
		return {
			visible: false,
			dataSource: [],
			dataSource1: [],
			objFrom:{},
			state:'',
			id:'',
			rules:{
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				status:[{ required: true, message: '请选择状态', trigger: 'change' }],
				category:[{ required: true, message: '请选择分类', trigger: 'change' }]
			},
		loadData: (q) => {
			return categoryList().then(res => {
             return res
			})
		  }
		};
	},
	methods:{
		dataList(){
		      this.$refs.table.refresh()
		},
		// 添加优化项
		showModal(e){
			this.resetForm()
			this.state = e
			this.visible = true
		},
		handleOk(e){
			const params = {
				...this.objFrom,
				status: this.objFrom.status == '1'
			}
			this.$refs.ruleForm.validate(valid=>{
				if(valid){
					if(this.state == true){
						addCategory(params).then(res=>{
							console.log(res)
							if(res.code === 200 || res.data.code === 200){
								this.$message.success('保存成功');
								this.visible = false
								this.$refs.ruleForm.resetFields();
								this.dataList()
							}else{
								this.$message.error('保存失败');
								this.visible = false
								this.$refs.ruleForm.resetFields();
								this.dataList()
							}
						})
					}else{
						const { category, status, name} = params
						let obj = {
							category,
							status,
							name,
							id:this.id
						}
						modifyCategory(obj).then(res=>{
							if(res.code === 200 || res.data.code === 200){
								this.$message.success('编辑成功');
								this.visible = false
								this.$refs.ruleForm.resetFields();
								this.dataList()
							}else{
								this.$message.error('编辑失败');
								this.visible = false
								this.$refs.ruleForm.resetFields();
								this.dataList()
							}
						})
					}
				}
			})
		},
		handleCancel(){
			this.visible = false
			this.$refs.ruleForm.resetFields()
		},
		//状态
		handleChange(e){
			this.objFrom.status = e
		},
		//分类
		handleChange1(e){
			this.objFrom.category = e
		},
		// 编辑
		addEdit(a,b){
			this.resetForm()
			this.objFrom = { ...a, status: a.status ? '1' : '0' }
			this.id = a.id
			this.visible = true
			this.state = b
		},
		resetForm() {
			this.objFrom = {...this.$options.data().objFrom}
		}
	}
};
</script>

<style></style>
